import React from 'react';
import styled from 'styled-components';
import { NavBar } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import { motion } from 'framer-motion';

interface PageLayoutProps {
  children: React.ReactNode;
  title?: string;
  showBack?: boolean;
  onBack?: () => void;
  rightContent?: React.ReactNode;
}

export const PageLayout: React.FC<PageLayoutProps> = ({
  children,
  title,
  showBack = true,
  onBack,
  rightContent,
}) => {
  const navigate = useNavigate();

  const handleBack = () => {
    if (onBack) {
      onBack();
    } else {
      navigate(-1);
    }
  };

  return (
    <Container
      as={motion.div}
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      {(title || showBack) && (
        <NavBar
          onBack={showBack ? handleBack : undefined}
          right={rightContent}
          style={{
            '--height': '44px',
            backgroundColor: 'white',
            position: 'sticky',
            top: 0,
            zIndex: 1,
            borderBottom: '1px solid var(--adm-color-border)',
          }}
        >
          {title}
        </NavBar>
      )}
      <Content>{children}</Content>
    </Container>
  );
};

const Container = styled.div`
  min-height: 100vh;
  background-color: var(--adm-color-background);
  display: flex;
  flex-direction: column;
`;

const Content = styled.div`
  flex: 1;
  padding: 16px;
  
  @media (min-width: 768px) {
    max-width: 768px;
    margin: 0 auto;
    width: 100%;
  }
`; 